<template>
	<view>
		<ItemList head>
			<template #title>
				<text class="form-name">{{title}}</text>
			</template>
			<template #topic>
				<p>{{subtitle}}</p>
			</template>
		</ItemList>
		<template>
			<uni-forms :modelValue="form" ref="formRef">
				<ItemList v-for="item in formItemList">
					<template #title>
						<p>{{item.title}}</p>
					</template>
					<template #topic>
						<template v-for="describeItem in item.describe">
							<p class="p">{{describeItem}}</p>
						</template>

						<template v-if="item.type == 'input'">
							<uni-forms-item :name="item.field" required>
								<u-input v-model="form[item.field]" border="bottom" placeholder="Your Answer"></u-input>
							</uni-forms-item>
						</template>

						<template v-else-if="item.type == 'combox'">
							<uni-forms-item :name="item.field" required>
								<uni-combox style="border-bottom: solid 1px #DCDFE6;" :candidates="item.options"
									:border="false" placeholder="select" v-model="form[item.field]"></uni-combox>
							</uni-forms-item>
						</template>

						<template v-else-if="item.type == 'select'">
							<uni-forms-item :name="item.field" required>
								<uni-data-select v-model="form[item.field]" :localdata="item.options"></uni-data-select>
							</uni-forms-item>
						</template>

						<template v-else-if="item.type == 'date'">
							<uni-forms-item :name="item.field" required>
								<uni-datetime-picker type="date" :clear-icon="false" v-model="form[item.field]" />
							</uni-forms-item>
						</template>

						<template v-else-if="item.type == 'datetime'">
							<uni-forms-item :name="item.field" required>
								<u-input @focus="show=true" v-model="form[item.field]" border="bottom"
									placeholder="Select Time"></u-input>
							</uni-forms-item>
							<u-datetime-picker @confirm='show=false' @cancel='show=false' :show="show"
								v-model="form[item.field]" mode="time" @close='show=false'
								closeOnClickOverlay></u-datetime-picker>
						</template>

						<template v-else-if="item.type == 'upload'">
							<uni-forms-item :name="item.field" required>
								<uni-file-picker v-model="imageValue" fileMediatype="image" mode="grid" @select="select"
									@progress="progress" @success="success" @fail="fail" />
							</uni-forms-item>
						</template>

					</template>
				</ItemList>
			</uni-forms>

		</template>
		<u-button type="primary" text="sumbit" class="btn" color="#6a38b5" @click='submit'></u-button>
	</view>
</template>

<script>
	import ItemList from '@/components/basicListItem/formCardItem/formCardItem.vue'
	import formApi from '@/api/forms.js'
	import Vue from 'vue'
	export default {
		components: {
			ItemList
		},
		data() {
			return {
				//时间picker显示
				show: false,
				formType: '',
				update: false,

				form: {},
				//form解释
				subtitle: '',
				// form标题
				title: '',
				//表单项
				formItemList: [],
				imageValue: [],

			}
		},
		onLoad(option) {
			//重置表单
			this.update = option.update
			if (this.update) {
				this.form = JSON.parse(decodeURIComponent(option.formList));
			}
			console.log('表单重置', this.form);
			this.formType = option.type
		},
		//DOM挂载完成
		onReady() {
			//获取表单项
			this.getOption()
		},
		methods: {
			getOption() {
				formApi.getFormInfo({
					formType: this.formType
				}).then(res => {
					this.formItemList = res.data.data.info.item
					//form解释
					this.subtitle = res.data.data.info.subtitle
					// form标题
					this.title = res.data.data.info.title
					this.generateValidationRules()
				})
			},
			//生成表单验证规则
			generateValidationRules() {
				const rules = {};
				this.formItemList.forEach(fields => {
					// 验证规则
					rules[fields.field] = {
						rules: [{
							required: true,
							errorMessage: 'Can not be empty',
						}]
					}
				});
				this.$refs.formRef.setRules(rules)
			},
			//表单提交
			submit() {
				console.log('提交的数据', this.form);
				uni.showLoading()
				//验证
				this.$refs.formRef.validate().then(res => {
					uni.hideLoading()
					console.log('表单数据信息：', res);
					// 提交修改
					if (this.update) {
						const formId = this.form.form_id
						console.log(formId);
						formApi.editfeedBack(this.form).then(res => {
							console.log(res);
						})
						// 提交新增
					} else {
						formApi.addResources(this.form).then(res => {
							console.log(res);
						})
					}
				}).catch(err => {
					uni.hideLoading()
					console.log('表单错误信息：', err);
				})
			},
			// 获取上传状态
			select(e) {
				console.log('选择文件：', e)
			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},

			// 上传成功
			success(e) {
				console.log('上传成功')
			},

			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			},

		},
	}
</script>

<style>
	page {
		background: #f3eafb;
	}

	.form-name {
		font-size: 70rpx;
		font-weight: 600;
	}

	.btn {
		width: 150rpx;
		float: left;
	}

	.p {
		margin-bottom: 20rpx;
		font-style: italic;
		text-decoration: underline;

	}
</style>